<template>
  <div>
    <el-card v-loading="config.loading">
      <el-tabs v-model="action.activeName" @tab-click="tabClick">
        <el-tab-pane
          v-for="item in show.panes"
          :key="item.id"
          :label="item.version"
          :name="item.id"
        >
          <template v-if="action.activeName == item.id">
            <span>{{ item.label }}用户分数</span>
            <div style="height: 350px">
              <user-echars :data="userScore"></user-echars>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-row v-loading="config.loading" :gutter="20" style="margin-top: 10px">
      <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>环比进步最快用户分数</span>
          </div>
          <progress-echars style="height: 250px"></progress-echars>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>{{ action.activeName }}版本用户分数排行</span>
          </div>
          <ranking style="height: 250px"></ranking>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import UserEchars from './components/UserEchars.vue'
import ProgressEchars from './components/ProgressEchars.vue'
import Ranking from './components/Ranking.vue'
import { request } from '../../../../api/request'

export default {
  name: 'AllUserScore',

  components: {
    UserEchars,
    ProgressEchars,
    Ranking
  },

  data() {
    return {
      config: {
        loading: false
      },
      userScore: [],
      show: {
        panes: [],
        userScore: {
          tableData: [
            {
              用户名: 123,
              分数: 123
            }
          ],
          fields: [
            {
              name: '用户名',
              title: '用户名'
            },
            {
              name: '分数',
              title: '分数'
            }
          ],
          rowAction: [
            {
              name: 'detail',
              title: '详情',
              func: () => {}
            }
          ]
        }
      },
      action: {
        activeName: '0'
      }
    }
  },

  mounted() {
    this.setRowAction()
    this.init()
  },

  methods: {
    tabClick() {
      this.getIndexData()
    },

    setRowAction() {
      this.show.userScore.rowAction.forEach((el) => {
        if (el.name === 'detail') {
          el.func = () => {
            this.$router.push({
              path: '/groupManage/dataAnalysis/allUserScore/detail'
            })
          }
        }
      })
    },

    async getFrameVersion(isLoading = true) {
      isLoading && (this.config.loading = true)
      await request('index/index/commonOrgVersionFilter', {}, (res) => {
        res.data.forEach((e) => (e.id = e.id.toString()))
        res.data.unshift({
          id: '0',
          version: '全部版本'
        })
        this.show.panes = res.data
      }).finally(() => isLoading && (this.config.loading = false))
    },

    async getIndexData(isLoading = true) {
      isLoading && (this.config.loading = true)
      let data = {}
      if (this.action.activeName != 0) data.id = this.action.activeName
      await request(
        'company/dataAnalysis/allUsersScore/index',
        data,
        (res) => {
          this.userScore = res.data.userScore
        },
        {
          isDelNull: true
        }
      ).finally(() => isLoading && (this.config.loading = false))
    },

    init() {
      this.config.loading = true
      this.getFrameVersion(false)
        .then(async () => {
          await this.getIndexData(false)
        })
        .finally(() => {
          this.config.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-info {
  font-weight: 600;
  font-size: 14px;
  line-height: 28px;
}
</style>
